<template>
  <div>
    <goga-header title="评价订单">
      <div slot="left">
        <span @click="goBack">
          <icon symbol="back"> </icon>
        </span>
      </div>
    </goga-header>
    <div class="rate-wrappper" v-if="process=100">
      <div class="rate-shop" v-if="getRate.shop">
        <router-link :to="{name:'shop',params:{shopId: getRate.shop.warehouseSn}}" class="p-header" >
          <div class="p-shop">
            <div class="p-pic" v-lazy:background-image="'http://www.gogagoga.cc/picfile/'+getRate.shop.wPic">
            </div>
            <div class="p-name">{{getRate.shop.wName}}</div>
            <icon symbol="right"> </icon>
          </div>
        </router-link>
        <div class="rate-info">
          <div class="item">
            <div class="left">商品质量</div>
            <div class="right">
            <span v-for="item in 5" class="rate-star" @click="eStar=item" :class="{fill: item<=eStar }">
              <icon symbol="star"></icon>
            </span>
            </div>
          </div>
          <div class="item" v-for="item in getRate.data">
            <div class="left">
              {{item.goName}}
            </div>
            <div class="right"></div>
          </div>
        </div>
      </div>

      <div class="rate-content">
        <textarea placeholder="填写1-300字之间的评价，即可得到积分哦~" v-model="eContent"></textarea>
      </div>
    </div>
    <div class='btn-bottom'>
      <button @click='submit()' class="btn" :disabled="btnDisabled"><span v-if="!btnDisabled">点击评价</span><span v-if="btnDisabled">处理中,请稍等</span></button>
    </div>
  </div>
</template>

<script lang="babel">
  import api from '@api'
  import gogaHeader from '@components/goga-header'
  import Icon from '@components/icon'
  import {mapGetters} from 'vuex'

  const fetchRateInfo = async function (store, orderId) {
    return store.dispatch('backend/order/getRate', orderId)
  }
  export default{
    components: {
      gogaHeader,
      Icon
    },
    computed: {
      ...mapGetters({
        isLogin: 'global/user/isLogin',
        getRate: 'backend/order/getRate'
      })
    },
    data() {
      return {
        process: 0,
        eStar:0,
        btnDisabled: false,
        eContent: ''
      }
    },
    async mounted() {
      let orderId = this.$route.params.id;
      await fetchRateInfo(this.$store, orderId);
      this.process = 100
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      async submit() {
        if(this.eStar==0) {
          this.$store.dispatch('global/toast', '请给店家打分');
          return
        }
        let config = {
          orderSn: this.$route.params.id,
          eContent: this.eContent,
          ePic: '',
          eStar: this.eStar*2,
          warehouseSn: this.getRate.shop.warehouseSn
        };
        let {data:{StatusCode, uIntegral, Status}} = await api.post('api/v2/Evaluate/addStoreEval.ashx', config);
        if(StatusCode == '200') {
          this.goBack();
          this.$store.dispatch('global/toast', '评价成功，获得'+uIntegral+'积分');
        } else {
          this.$store.dispatch('global/toast', Status);
        }
      }
    }
  }
</script>

<style lang="less">
  @import "index.less";
</style>
